<script setup lang="ts">
import type { EChartsOption } from 'echarts'

const options: EChartsOption = reactive({
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['直接访问', '搜索引擎', '社交媒体', '电子邮件', '视频广告'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} 次',
    },
  },
  series: [
    {
      name: '直接访问',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: '社交媒体',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: '电子邮件',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: '视频广告',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
})
</script>

<template>
  <div>
    <sy-echarts :option="options" height="400px" title="销售情况" />
  </div>
</template>

<style></style>
